
@import "../../variables";

//
// Sidebar
// --------------------------------------------------

// Basics of a sidebar
@sidebar-width: 180px;
@sidebar-width-mini: 50px;
@sidebar-width-full: @sidebar-width;
@sidebar-scroller-width: 20px;
@sidebar-fold-height: 30px;
@sidebar-padding-left: 15px;

//** Navbar Tools color
@sidebar-default-color:             @gray-dark;
@sidebar-default-bg:                @navbar-default-bg;
@sidebar-default-border:            darken(@sidebar-default-bg, 10%);

@sidebar-inverse-color:             @gray-light;
@sidebar-inverse-bg:                @gray-darker;
@sidebar-inverse-border:            darken(@sidebar-inverse-bg, 10%);


.sidebar {

  @sidebar-transition-duration: 300ms;

  width: 0;
  display: none;
  position: fixed;
  top: @navbar-height;
  bottom: 0;
  z-index: 102;
  overflow-x: visible;
  overflow: hidden;
  padding-bottom: @sidebar-fold-height;

  .sidebar-wrapper {
    width: @sidebar-width + @sidebar-scroller-width;
    overflow-x: hidden;
    height: 100%;
  }

  .sidebar-fold {
    width: @sidebar-width;
    height: @sidebar-fold-height;
    line-height: @sidebar-fold-height !important;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    .sidebar-fold-fa {
      width: @sidebar-fold-height;
      height: @sidebar-fold-height;
      transform: rotate(0deg);
      margin: 0 auto;
      transition: transform @sidebar-transition-duration;
    }
    &:hover,
    &:focus {
      color: @navbar-default-link-hover-color;
      background-color: @navbar-default-link-active-bg;
    }
  }

  .sidebar-accordion {
    .panel-group {
      width: @sidebar-width;
      margin-bottom: 0;

      .panel {
        box-shadow: none;
        border-radius: 0;
        & + .panel {
          margin-top: 0;
        }
      }
    }
    .panel-default {
      border: none;
      .panel-heading {
        border: none;
        background-color: @sidebar-default-bg;
        color: @sidebar-default-color;
        padding: 0;

        &.main {
          background-color: darken(@sidebar-default-bg, 10%);
        }

        &:hover,
        &:focus {
          color: @navbar-default-link-hover-color;
          background-color: @navbar-default-link-active-bg;
        }

        .panel-title {
          font-size: 14px;
          line-height: 20px;
          height: 40px;
          white-space: nowrap;
          overflow: hidden;
          padding: 10px 0 10px @sidebar-padding-left;

          a {
            outline: none;
            text-decoration: none;
            display: block;
            width: @sidebar-width-full - @sidebar-padding-left;
          }
        }

        .config {
          padding-right: @sidebar-padding-left;
          cursor: pointer;
          text-align: center;
        }
      }
      .panel-body {
        border: none;
        padding: 0;

        .panel-heading {
          .nav-title {
            margin-left: 5px;
          }
        }
      }

      .fa-caret-down {
        transform: rotate(-90deg);
        transition: transform @sidebar-transition-duration;
      }

      &.panel-open {
        .fa-caret-down {
          transform: rotate(0deg);
        }
      }
    }
    .fa {
      width: 20px;
    }
  }

  .tooltip {
    white-space: nowrap;
  }

  .nav-title {
    font-weight: normal;
  }

}

.sidebar-default {
  background-color: @sidebar-default-bg;
  color: @sidebar-default-color;

  .sidebar-fold {
    background-color: darken(@sidebar-default-bg, 10%);

    &:hover,
    &:focus {
      color: @navbar-default-link-hover-color;
      background-color: @navbar-default-link-active-bg;
    }
  }

  .sidebar-accordion {
    .panel-default {
      .panel-heading {
        background-color: @sidebar-default-bg;
        color: @sidebar-default-color;

        &.main {
          background-color: darken(@sidebar-default-bg, 10%);
        }

        &.active {
          color: @navbar-default-link-hover-color;
        }

        &:hover,
        &:focus {
          color: @navbar-default-link-hover-color;
          background-color: @navbar-default-link-active-bg;
        }
      }
    }
  }
}

.sidebar-inverse {
  background-color: @sidebar-inverse-bg;
  color: @sidebar-inverse-color;

  .sidebar-fold {
    background-color: darken(@sidebar-inverse-bg, 10%);

    &:hover,
    &:focus {
      color: @navbar-inverse-link-hover-color;
      background-color: @navbar-inverse-link-active-bg;
    }
  }

  .sidebar-accordion {
    .panel-default {
      .panel-heading {
        background-color: @sidebar-inverse-bg;
        color: @sidebar-inverse-color;

        &.main {
          background-color: darken(@sidebar-inverse-bg, 10%);
        }

        &.active {
          color: @navbar-inverse-link-hover-color;
        }

        &:hover,
        &:focus {
          color: @navbar-inverse-link-hover-color;
          background-color: @navbar-inverse-link-active-bg;
        }
      }
    }
  }

}

.sidebar-@{full} .sidebar, .sidebar.sidebar-@{full} {
  width: @sidebar-width-full;
  display: block;
  .sidebar-wrapper {
    width: @sidebar-width-full + @sidebar-scroller-width;
  }
  .sidebar-fold {
    width: @sidebar-width-full;
    .sidebar-fold-fa {
      transform: rotate(450deg);
    }
  }

  .sidebar-accordion {
    width: @sidebar-width-full;
    .panel-group {
      width: @sidebar-width-full;
    }
    .config {
      display: inline;
    }
  }

  .nav-title {
    display: inline;
  }
}

.sidebar-@{mini} .sidebar, .sidebar.sidebar-@{mini} {
  width: @sidebar-width-mini;
  display: block;
  .sidebar-wrapper {
    width: @sidebar-width-mini + @sidebar-scroller-width;
  }
  .sidebar-fold {
    width: @sidebar-width-mini;
    .sidebar-fold-fa {
      transform: rotate(0deg);
    }
  }

  .sidebar-accordion {
    width: @sidebar-width-mini;
    .panel-group {
      width: @sidebar-width-mini;
    }
    .config {
      display: none;
    }
  }

  .nav-title {
    display: none;
  }
}


